<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue1</title>
    <style>
        [v-cloak] {
            display: none;
        }
        body {
            background-color: rgb(158, 194, 58);
        }
        #app {
            text-align: center;
            margin-top: 100px;
        }
        #app > button {
            display: inline-block;
            padding: 15px 25px;
            text-decoration: none;
            outline: none;
            cursor: pointer;
            font-size: 20px;
            border: none;
            border-radius: 10px;
            box-shadow: 0 9px #999;
            font-family: 'Microsoft-YaHei';
        }
        #app > button.active {
            background-color: rgb(110, 110, 228);
            box-shadow: 0 5px #666;
            transform: translateY(4px);
        }
        #app > h4 {
            border-radius: 10px;
            height: 200px;
            border: 1px solid #ccc;
            line-height: 200px;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        <button :class="{active:button_active}" @click="lang">浪里个浪</button>
        <button :class="{active:button2_active}" @click="no_lang">在这停顿</button>
        <h4 v-bind:style="{color: currColor,'background-color':bgc}" v-text="msg"></h4>
        <video style="width:350px" src="./media/01 webpack简介.mp4" autoplay controls></video>
    </div>
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: '让我```们滑起双浆~~~~~,小船儿推开~~~~波浪',
                intervalId:null,
                currColor:'',
                bgc:'rgb(76, 87, 124)',
                button_active:false,
                button2_active:false
            },
            methods: {
                lang() {
                    var colorPool = ['black','pink','yellow','red','blue','gray','purple','green'];
                    this.button_active = true;
                    this.button2_active = false;
                    if(this.intervalId != null) return;
                    this.intervalId =  setInterval(()=>{
                        var rand1 = Math.ceil(Math.random() * 255);
                        var rand2 = Math.ceil(Math.random() * 255);
                        var rand3 = Math.ceil(Math.random() * 255);
                        this.currColor = colorPool[Math.ceil(Math.random() * 4)]
                        this.bgc = `rgb(${rand1},${rand2},${rand3})`;
                        var start = this.msg.substring(0,1)
                        var end = this.msg.substring(1)
                        this.msg = end + start
                    },200)
                },
                no_lang() {
                    clearInterval(this.intervalId);
                    this.intervalId = null;
                    this.button_active = false;
                    this.button2_active = true;
                    setTimeout(()=>{
                        this.button2_active = false
                    },150)
                }
            }
        })
    </script>
</body>

</html>